<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="header::head-fragment('首页')">
</head>

<body>
    <div th:replace="header::header-fragment"></div>

    <div class="layui-container fly-marginTop">
        <div class="fly-panel fly-panel-user" pad20>
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title">
                    <li class="layui-this">登入</li>
                    <li><a th:href="@{/register}">注册</a></li>
                </ul>
                <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-form-pane">
                            <form method="post" id="loginForm" onsubmit="return false;" action="##">
                                <div class="layui-form-item">
                                    <label for="loginName" class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="loginName" name="loginName" required
                                            lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="password" class="layui-form-label">密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="password" name="password" required
                                            lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                    <!-- <div class="layui-form-mid layui-word-aux">6到20个字符</div> -->
                                </div>
                                <div class="layui-form-item">
                                    <label for="verifyCode" class="layui-form-label">验证码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="verifyCode" name="verifyCode" required
                                            lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                    <div class="layui-form-mid">
                                        <span><img data-tooltip="看不清楚？换一张" th:src="@{/common/captcha}"
                                                onclick="this.src='/common/captcha?d='+new Date()*1"
                                                alt="单击图片刷新！"></span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" lay-filter="*" lay-submit onclick="login()">立即登录</button>
                                    <span style="padding-left:20px;">
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer-container"></div>
    <!-- <div style="display: none" class="fly-footer">
    <p>My-BBS社区 2021 &copy; <a href="https://github.com/ZHENFENG13/My-BBS" target="_blank">十三</a></p>
</div> -->

    <script th:src="@{/js/public.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript">
        layui.use(['layer', 'jquery'], function () {
            var layer = layui.layer;
            var $ = layui.$;
            window.login = function () {
                var loginName = $("#loginName").val();
                if (!validLoginName(loginName)) {
                    layer.alert('请输入正确的登录名!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var password = $("#password").val();
                if (!validPassword(password)) {
                    layer.alert('请输入正确的密码格式!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var verifyCode = $("#verifyCode").val().toLowerCase();
                console.log(verifyCode);
                if (!validLength(verifyCode, 5)) {
                    layer.alert('请输入正确的验证码!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var params = $("#loginForm").serialize();
                var url = '/login';
                $.ajax({
                    type: 'POST',//方法类型
                    url: url,
                    data: params,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            window.location.href = '/index';
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }
            // 我的jquery代码
            $(function () {
                $("#footer-container").load("html/footer.html");
            });
        });
    </script>
</body>

</html>